<template>
  <div class="drawer-select">
    <section v-if="!isBegin" class="drawer-select-empty">
      <el-button type="primary" :icon="Plus" link @click="onBegin">开始绘制</el-button>
    </section>
    <section v-else class="drawer-select-main">
      <el-form :model="formData" >
        <el-form-item label="安全力量">
          <el-cascader v-model="formData.security" :options="securityOptions" :props="securityProps" filterable clearable>
            <template #default="{ node, data }">
              <span>{{ data.mc }}</span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="标绘方式">
          <el-cascader ref="markSelectRef" v-model="formData.mark" :options="markOptions" :props="markProps" filterable clearable @change="onMarkerChange">
            <template #default="{ node, data }">
              <span>{{ data.mc }}</span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
      <aside class="drawer-select-main-action">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onBeginDraw">开始绘制</el-button>
      </aside>
    </section>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, useTemplateRef, nextTick } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { fetchZbgl } from '@/api/zbgl';
import { fetchBhgl } from '@/api/bhgl';
import { eventBus } from '@/utils/eventBus';
import { ElMessage } from 'element-plus';

const props = defineProps({
  mapRef: {
    type: Object,
    default: () => ({}),
  },
});

onMounted(async () => {
  await nextTick();
  const mapReadyData = await props.mapRef.onMapReady();
  mapEditor.value = mapReadyData.mapEditor;
})

const isBegin = ref(false);
const formData = ref({});
const securityOptions = ref([]);
const securityProps = { label: 'mc', value: 'id' }
const markOptions = ref([]);
const markProps = { label: 'mc', value: 'id' }
const markSelectRef = useTemplateRef('markSelectRef');
const checkNodeList = ref([]);
const mapEditor = ref(null);

const onBegin = () => {
  isBegin.value = true;
  getSecurityOptions();
  getMarkOptions();
};

const onCancel = () => {
  isBegin.value = false;
  formData.value = {};
};

const onBeginDraw = async () => {
  if (!mapEditor.value || typeof mapEditor.value.onBtnCtrlActive != 'function') {
    ElMessage.warning('请等待地图加载完成');
    return;
  }
  if (!Array.isArray(checkNodeList.value) || checkNodeList.value.length < 2) {
    ElMessage.warning('请选择标绘方式');
    return;
  }
  const parentNode = checkNodeList.value[0];
  const currNode = checkNodeList.value[1];
  const styleConfig = await eventBus.requestData(
    'DrawSelect:onGetStyleConfig:request',
    'StyleEdit:onGetStyleConfig:response',
    parentNode.bh
  )
  // console.log('styleConfig', styleConfig);
  mapEditor.value.onBtnCtrlActive(currNode.bh, styleConfig); // 开始绘制，后续操作在DataEdit组件中处理(注意：开始绘制时，会默认取消地图上选中的图形)
  eventBus.emit('DrawSelect:onBeginDraw', parentNode)
}

const onMarkerChange = () => {
  if (!markSelectRef.value) return [];
  const allCheckNodes = markSelectRef.value.getCheckedNodes();
  checkNodeList.value = Array.isArray(allCheckNodes) && allCheckNodes.length ? allCheckNodes[0].pathNodes.map(item => item.data) : [];
  eventBus.emit('DrawSelect:onMarkerChange', checkNodeList.value)
}

const getSecurityOptions = async () => {
  securityOptions.value = [
    {
      id: '1',
      bh: '1',
      zt: 1,
      mc: '警力设备',
      ms: '警力设备描述警力设备描述警力设备描述警力设备描述警力设备描述',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          bh: '001001',
          zt: 1,
          mc: '执法记录仪',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          bh: '001002',
          zt: 1,
          mc: '警车',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          bh: '001003',
          zt: 0,
          mc: '安全车',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
    {
      id: '2',
      bh: '2',
      zt: 0,
      mc: '感知设备',
      ms: '感知设备描述',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          bh: '001001',
          zt: 1,
          mc: '球型摄像头',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          bh: '001002',
          zt: 1,
          mc: '枪击摄像头',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          bh: '001003',
          zt: 0,
          mc: '高空摄像头',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
  ]
}

const getMarkOptions = async () => {
  markOptions.value = [
    {
      id: '0',
      bh: 'icon',
      zt: 1,
      mc: '点标记',
      ms: '用于地图标点',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          id: '1-1',
          bh: 'icon',
          zt: 1,
          mc: '卡车',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '1-2',
          bh: 'icon',
          zt: 1,
          mc: '警车',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
    {
      id: '2',
      bh: 'line',
      zt: 0,
      mc: '线标记',
      ms: '用于地图画线',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          id: '2-1',
          bh: 'line',
          zt: 1,
          mc: '直线',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '2-2',
          bh: 'curve_line',
          zt: 1,
          mc: '曲线',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '2-3',
          bh: 'arc',
          zt: 1,
          mc: '圆弧线',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '2-4',
          bh: 'free_drawing',
          zt: 1,
          mc: '草图线',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
    {
      id: '3',
      bh: 'polygon',
      zt: 0,
      mc: '面标记',
      ms: '用于地图画面',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          id: '3-4',
          bh: 'circle',
          zt: 1,
          mc: '圆',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-5',
          bh: 'ellipse',
          zt: 1,
          mc: '椭圆',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-6',
          bh: 'sector',
          zt: 1,
          mc: '扇形',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-2',
          bh: 'rectangle',
          zt: 1,
          mc: '矩形',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-1',
          bh: 'polygon',
          zt: 1,
          mc: '多边形',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-3',
          bh: 'triangle',
          zt: 1,
          mc: '三角形',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '3-7',
          bh: 'curve_polygon',
          zt: 1,
          mc: '曲线面',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
    {
      id: '4',
      bh: 'arrow',
      zt: 0,
      mc: '箭头标记',
      ms: '用于地图画面',
      cjsj: '2021-01-01 00:00:00',
      children: [
        {
          id: '4-4',
          bh: 'line_arrow',
          zt: 1,
          mc: '直线箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-5',
          bh: 'thin_straight_arrow',
          zt: 1,
          mc: '细直箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-6',
          bh: 'thin_tail_arrow',
          zt: 1,
          mc: '细直(尾)箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-2',
          bh: 'attack_arrow',
          zt: 1,
          mc: '突击箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-1',
          bh: 'offensive_arrow',
          zt: 1,
          mc: '进攻箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-3',
          bh: 'offensive_tail_arrow',
          zt: 1,
          mc: '进攻(尾)箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
        {
          id: '4-7',
          bh: 'pincer_attack_arrow',
          zt: 1,
          mc: '钳击箭头',
          icon: 'marker_policeCar.png',
          cjsj: '2021-01-01 00:00:00'
        },
      ]
    },
  ]
}
</script>

<style lang="scss" scoped>
.drawer-select {
  height: 100%;
  margin: 0 var(--ycy-gap-base);
  padding: var(--ycy-gap-base);
  padding-bottom: 0;
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-fill-color-blank);

  .drawer-select-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--el-text-color-secondary);
    font-size: var(--el-font-size-small);

    .el-icon {
      margin-right: var(--ycy-gap-small);
    }
  }

  .drawer-select-main {
    display: flex;

    &-action {
      margin-left: var(--ycy-gap-base);
      display: flex;
      flex-direction: column;

      .el-button {
        margin-left: 0;

        &:first-child {
          margin-bottom: var(--ycy-gap-large);
        }
      }
    }
  }
}
</style>